<template>
  <div class="outmain ba_f">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>用户列表</span>
      </div>
    </div>
    <div class="pad_20 flex-bet flex-y-top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline searchform" style="width: 100%;">
        <div>
          <el-form-item label="手机号/真实姓名/用户昵称">
            <el-input v-model="formInline.keyword" size="medium" placeholder="手机号/真实姓名/用户昵称" @input="onSearch"></el-input>
          </el-form-item>
        </div>
        <div class="mar_t30 mar_b30">
          <el-form-item label="标签名称">
            <el-select v-model="formInline.vipLabel" placeholder="请选择" clearable @change="onSearch">
              <el-option v-for="item in labelOptions" :key="item.id" :label="item.labelName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="来源渠道" class="mar_l20">
            <el-select v-model="formInline.userChannel" placeholder="请选择" clearable @change="onSearch">
              <el-option v-for="item in lyOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户身份" class="mar_l20">
            <el-select v-model="formInline.isBlack" placeholder="请选择" clearable @change="onSearch">
              <el-option v-for="item in SfOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="flex-bet">
          <el-form-item label="用户注册时间">
            <el-date-picker v-model="formInline.timeData" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            <el-button class="mar_l20" type="primary" @click="onSearch" size="medium">搜索</el-button>
          </el-form-item>
          <el-button type="primary" @click="exportForm" size="medium">导出列表</el-button>
        </div>
      </el-form>
      <!-- <div class="flex">
        <ul class="flex tablebtn">
          <li class="t_btn bor_dd curs">
            <el-button size="medium" @click="handleDelete">批量删除</el-button>
          </li>
          <li class="t_btn bor_dd curs">
            <el-button size="medium" @click="handleBlack">批量拉黑</el-button>
          </li>
          <li class="t_btn bor_dd curs">
            <el-button size="medium">批量修改余额</el-button>
          </li>
          <li class="t_btn bor_dd curs">
            <el-button size="medium">批量修改积分</el-button>
          </li>
        </ul>
      </div>-->
    </div>
    <div class="tabledata">
      <el-table v-loading="listLoading" :element-loading-text="elementLoadingText" :data="list" stripe style="width: 100%" @selection-change="setSelectRows">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="portrait" label="用户信息" width="260">
          <template slot-scope="scope">
            <div class="flex flex-y-top">
              <div class>
                <img class="goodlogo bor_rad50" :src="scope.row.portrait" />
              </div>
              <div class="mar_l10">
                <div class="flex">
                  <div class>{{scope.row.userName}}</div>
                  <el-tag size="mini" type="info" class="mar_l5">（ID:{{scope.row.id}}）</el-tag>
                </div>
                <p class="fon_12 color_9 mar_t5">来源：
                  <span v-if="scope.row.bindType=='1'">微信小程序</span>
                  <span v-if="scope.row.bindType=='3'">支付宝小程序</span>
                  <span v-if="scope.row.bindType=='7'">字节小程序</span>
                </p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="userTel" label="手机号"></el-table-column>
        <el-table-column label="会员等级" align="center">
          <template slot-scope="scoped">{{ scoped.row.level ? scoped.row.level == 0 ? '--' : `等级${ scoped.row.level }` : '--' }}</template>
        </el-table-column>
<!--         <el-table-column prop="cardNum" label="用券次数"></el-table-column>-->
        <el-table-column prop="cj" label="成交">
          <template slot-scope="scope">
            <div>订单：{{scope.row.payNum || 0}}</div>
            <div>金额：{{scope.row.payMoney || 0}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="integral" label="积分/余额" width="200">
          <template slot-scope="scope">
            <div>
              积分：{{scope.row.integral}}
              <a class="el-icon-edit-outline" @click="handleEdit(scope.row,'integral')"></a>
            </div>
            <div>
              余额：{{scope.row.balance}}
              <a class="el-icon-edit-outline" @click="handleEdit(scope.row,'balance')"></a>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="注册时间"></el-table-column>
        <el-table-column label="是否拉黑">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isBlack" active-value="1" inactive-value="2" @change="handleBlack(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="flex">
              <el-button type="text" @click="handleSeeEdit(scope.row)">查看</el-button>
              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
      <edit ref="edit" @fetchData="fetchData"></edit>
    </div>
  </div>
</template>
<script>
import Edit from './components/userlistedit';
import index from '@/api/index';
import { changeDate } from '@/utils/index';
import { getMemberLis, changeStatus, getMemberLabel } from '@/api/user';

export default {
  name: 'userquery',
  components: { Edit },
  created() {
    this.fetchData();
    this.lableData();
  },
  data() {
    return {
      formInline: {
        keyword: '',
        vipLabel: '',
        isBlack: '',
        userChannel: '',
        timeData: ''
      },
      list: [],
      listLoading: true,
      selectRows: '',
      elementLoadingText: '正在加载...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
      labelOptions: [],
      lyOptions: [
        {
          value: '1',
          label: '微信小程序'
        },
        {
          value: '3',
          label: '支付宝小程序'
        }
      ],
      SfOptions: [
        {
          value: '1',
          label: '拉黑用户'
        }
      ]
    };
  },
  methods: {
    async lableData() {
      const { data } = await getMemberLabel();
      this.labelOptions = data;
    },
    async fetchData() {
      let startTime = '';
      let endTime = '';
      if (this.formInline.timeData) {
        startTime = changeDate(this.formInline.timeData[0]);
        endTime = changeDate(this.formInline.timeData[1]);
      }
      var params = {
        page: this.page.currentPage,
        keyword: this.formInline.keyword,
        vipLabel: this.formInline.vipLabel,
        isBlack: this.formInline.isBlack,
        userChannel: this.formInline.userChannel,
        startTime,
        endTime
      };
      const { data, count } = await getMemberLis(params);
      this.list = data;
      this.page.total = count;
      this.listLoading = false;
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    handleEdit(row, type) {
      if (row.id) {
        this.$refs['edit'].showEdit(row, type);
      }
    },
    handleSeeEdit(row) {
      this.$router.push(`/userdetails?id=${row.id}`);
    },
    onSearch() {
      this.fetchData();
    },
    handleDelete(row) {
      if (row.id) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await changeStatus({ id: row.id, status: row.status });
          this.$baseMessage(msg, 'success');
          this.fetchData();
        });
      } else {
        if (this.selectRows.length > 0) {
          const id = this.selectRows.map((item) => item.id);
          this.$baseConfirm('你确定要删除选中项吗', null, async () => {
            const { msg } = await changeStatus({ id });
            this.$baseMessage(msg, 'success');
            this.fetchData();
          });
        } else {
          this.$baseMessage('未选中任何行', 'error');
          return false;
        }
      }
    },
    async handleBlack(row) {
      if (row && row.isBlack == '1') {
        if (row.id) {
          this.$baseConfirm('你确定要拉黑当前用户吗', null, async () => {
            const { msg } = await changeStatus({ id: row.id, isBlack: row.isBlack });
            this.$baseMessage(msg, 'success');
            this.fetchData();
          });
        } else {
          if (this.selectRows.length > 0) {
            const id = this.selectRows.map((item) => item.id);
            this.$baseConfirm('你确定要拉黑选中用户吗', null, async () => {
              const { msg } = await changeStatus({ id });
              this.$baseMessage(msg, 'success');
              this.fetchData();
            });
          } else {
            this.$baseMessage('未选中任何行', 'error');
            return false;
          }
        }
      } else {
        if (row.id) {
          const { msg } = await changeStatus({ id: row.id, isBlack: row.isBlack });
          this.$baseMessage(msg, 'success');
          this.fetchData();
        } else {
          if (this.selectRows.length > 0) {
            const id = this.selectRows.map((item) => item.id);
            const { msg } = await changeStatus({ id });
            this.$baseMessage(msg, 'success');
            this.fetchData();
          } else {
            this.$baseMessage('未选中任何行', 'error');
            return false;
          }
        }
      }
    },
    exportForm() {
      const a = document.createElement('a');
      let startTime = this.formInline.timeData ? changeDate(this.formInline.timeData[0]) : '';
      let endTime = this.formInline.timeData ? changeDate(this.formInline.timeData[1]) : '';
      let backendPath = index.backendPath;
      const href = `${backendPath}channel/member/get-member-list?export=1&page=${this.page.currentPage}&startTime=${startTime}&endTime=${endTime}&keyword=${this.formInline.keyword}&vipLabel=${this.formInline.vipLabel}&isBlack=${this.formInline.isBlack}&userChannel=${this.formInline.userChannel}`;
      a.setAttribute('href', href);
      a.click();
    }
  }
};
</script>
<style>
.searchform .el-form-item {
  margin-bottom: 0;
}
</style>
